<?php echo $this->Html->script('ion.rangeSlider.min') ?>
<?php echo $this->Html->css('load/ion.rangeSlider') ?>
<?php echo $this->Html->css('load/ion.rangeSlider.skinFlat') ?>
<?php echo $this->Html->css('load/ion.rangeSlider.skinNice') ?>
<?php echo $this->Html->css('load/ion.rangeSlider.skinSimple') ?>
<?php echo $this->Html->css('load/normalize.min') ?>



<p id="ID"></p>


<script>



    $( document ).ready(function() {

        $("#ID").ionRangeSlider({
            min: 20,                        // min value
            max: 900,                       // max value
            from: 30,                       // overwrite default FROM setting
            to: 80,                         // overwrite default TO setting
            type: "double",                 // slider type
            step: 10,                       // slider step
            postfix: " Euros",             // postfix text
            hasGrid: false,                  // enable grid
            hideText: false,                 // hide all text data
            onChange: function(obj){        // callback, is called on every change
                console.log(obj);

            },
            onFinish: function(obj){        // callback, is called once, after slider finished it's work
                console.log(obj);
                alert(obj.fromNumber + '-' + obj.toNumber);


            }
        });
    })





</script>